<template>
  <div>
    <el-row class="row" :gutter="20">
      <el-col :span="16">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/student' }">学生菜单</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/student/choice' }">自主选题</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="searchInput">
          <el-select class="select" v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="课题名称" value="topName"></el-option>
            <el-option label="课题性质" value="topProperty"></el-option>
            <el-option label="课题类别" value="topCategory"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table class="elTable" v-loading="loading" :data="topicList" border stripe height="630">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="topNo" label="课题编号">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row.topNo)">{{scope.row.topNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="teaNo" label="教师工号">
        <template slot-scope="scope">
          <el-button type="text" @click="showTeacherInfo(scope.row.teaNo)">{{scope.row.teaNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="topName" label="课题名" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="topProperty" label="课题性质"></el-table-column>
      <el-table-column prop="topCategory" label="课题类别"></el-table-column>
      <el-table-column prop="topContent" label="课题内容" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="colName" label="学院"></el-table-column>
      <el-table-column prop="gmtCreate" label="发布时间" :show-overflow-tooltip="true" sortable>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="choice(scope.row.topNo)">确认选题</el-button>
        </template>
      </el-table-column>
    </el-table>
    <topic-info :visible.sync="showTopicDialog" :topNo="this.topNo" />
    <teacher-info :teaNo="teaNo" :visible.sync="profileVisible" />
  </div>
</template>
<script>
import TopicInfo from '../topic/TopicInfoDialog'
import TeacherInfo from '../teacher/TeacherInfo'
export default {
  name: 'studentChoice',
  components: {
    TopicInfo,
    TeacherInfo
  },
  data () {
    return {
      teaNo: '',
      profileVisible: false,
      showTopicDialog: false,
      loading: true,
      searchInput: '',
      select: 'topName',
      topicList: [],
      topNo: '',
      topName: '',
      topProperty: '',
      topCategory: ''
    }
  },
  methods: {
    listTopic () {
      this.$axios.get('api/topic', {
        params: {
          topName: this.topName,
          topProperty: this.topProperty,
          topCategory: this.topCategory,
          topState: 1
        }
      })
        .then(response => {
          let result = response.data
          if (result.success) {
            this.topicList = result.data
          } else {
            this.$message.error(result.msg)
          }
          this.loading = false
        })
    },
    search () {
      this.topName = null
      this.topProperty = null
      this.topCategory = null
      switch (this.select) {
        case 'topName': {
          this.topName = this.searchInput
          break
        }
        case 'topProperty': {
          this.topProperty = this.searchInput
          break
        }
        case 'topCategory': {
          this.topCategory = this.searchInput
          break
        }
        default:
          break
      }
      this.searchInput = null
      this.listTopic()
    },
    choice (choiceTopNo) {
      console.log('choiceTopNo:', choiceTopNo)
      this.$confirm('每人仅由一次选题机会, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const choiceInfo = { topNo: choiceTopNo }
        this.$axios.post('/api/choice', choiceInfo)
          .then(response => {
            let result = response.data
            if (result.success) {
              this.$message({
                type: 'success',
                message: '选题成功!'
              })
            } else {
              this.$message.error(result.msg)
            }
          })
      }).catch(() => {
      })
    },
    detail (topNo) {
      this.topNo = topNo
      this.showTopicDialog = true
    },
    showTeacherInfo (teaNo) {
      this.teaNo = teaNo
      this.profileVisible = true
    }
  },
  mounted () {
    this.listTopic()
  }
}
</script>

<style lang="stylus" scoped>
.row {
  margin: 20px;
}

.select {
  width: 110px;
}

.elTable >>> .cell {
  text-align: center;
}

.elTable {
  text-align: center;
}
</style>
